<template>
  <div>
    <BackTop style="color: white"></BackTop>
    <div id="title">
    <h2 id="introduce" style="color:rgb(255,255,255);">About Me</h2>
    <img  id="photo" src="https://cdn.acwing.com/media/user/profile/photo/146453_lg_fdae5db08f.jpeg" alt="">
    </div>
    <div id="context">
      <div id="inner-context" >
        <Card :bordered="false">
          <p slot="title">{{index.title}}</p>
          <div v-html="index.text" class="article-text"></div>
        </Card>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Introduction',
  data() {
    return{
      index: {},
    }
  },
  created: function () {

    //获取博主介绍信息
    this.$api.get('getIndex').then((res) => {
      console.log(res);
      this.index = res.data
      console.log(this.index)

    })
  }
}
</script>

<style scoped>

  #title{
    margin-top: 40px;
    margin-bottom: 25px;
    text-align: center;
  }

  #photo{
    margin-top: 15px;
    width: 120px;
    height: 120px;
    border-radius: 5px;
  }

  #context{
    width: 70%;
    text-align: center;
    margin:0 auto;
  }
</style>